<!DOCTYPE html>
<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../pictures/top.jpg">
    <link href="../css/style.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <img src="../pictures/top.jpg">
    <div v-if="keyword != ''">
        <h3>{{keyword}}新冠疫情</h3>
        <p class="txt">来源：各地官方通报及权威媒体报道</p>
        <p class="txt">更新：2020-11-16 22:55:26(北京时间)</p>

        <!--        <div v-if="keyword == '中国'">-->
        <!--            <h3>中国疫情地图</h3>-->
        <!--            <div id="map" style="width: 100%; height: 400px; "></div>-->
        <!--        </div>-->
        <div class="flexbox">
            <div class="item">
                <div class="pink bold">{{totalCountryConfirmed}}</div>
                <div class="medium gray">累计确诊</div>
                <div class="small">
                    <span class="gray">昨日</span>
                    <span class="pink">+10</span>
                </div>
            </div>
            <div class="item">
                <div class="green bold">{{totalCountryRecovered}}</div>
                <div class="medium gray">累计治愈</div>
                <div class="small">
                    <span class="gray">昨日</span>
                    <span class="green">+8</span>
                </div>
            </div>
            <div class="item">
                <div class="gray bold">{{totalCountryDeaths}}</div>
                <div class="medium gray">累计死亡</div>
                <div class="small">
                    <span class="gray">前日</span>
                    <span class="gray">+0</span>
                </div>
            </div>
        </div>

        <!-- 表格 -->
        <div>
            <div class="row">
                <div class="column">省份/州</div>
                <div class="pink column">确诊</div>
                <div class="gray column">死亡</div>
                <div class="green column">治愈</div>
            </div>


            <!--            &lt;!&ndash; 省市必须是兄弟节点，方便控制展开与收缩 &ndash;&gt;-->
            <div class="row bggray" v-for="item in showlist">
                <div class="column">{{item.province}}</div>
                <div class="gray column">{{item.confirmed}}</div>
                <div class="gray column">{{item.deaths}}</div>
                <div class="gray column">{{item.recovered}}</div>
            </div>


            <div id="msg" @click="toggledata">
                {{msg}}
            </div>
        </div>
    </div>

    <div v-if="keyword == ''">
        <h3>世界新冠疫情</h3>
        <p class="txt">来源：各地官方通报及权威媒体报道</p>
        <p class="txt">更新：2020-11-16 22:55:26(北京时间)</p>


        <div class="flexbox">
            <div class="item">
                <div class="pink bold">{{totalConfirmed}}</div>
                <div class="medium gray">累计确诊</div>
                <div class="small">
                    <span class="gray">昨日</span>
                    <span class="pink">+10</span>
                </div>
            </div>
            <div class="item">
                <div class="green bold">{{totalRecovered}}</div>
                <div class="medium gray">累计治愈</div>
                <div class="small">
                    <span class="gray">昨日</span>
                    <span class="green">+8</span>
                </div>
            </div>
            <div class="item">
                <div class="gray bold">{{totalDeaths}}</div>
                <div class="medium gray">累计死亡</div>
                <div class="small">
                    <span class="gray">前日</span>
                    <span class="gray">+0</span>
                </div>
            </div>
        </div>

        <!--        <h3>全球疫情最严重的6个国家/地区</h3>-->
        <!--        <div id="worldbar" style="width: 100%; height: 400px;"></div>-->
        <h3>全球疫情地图</h3>
        <div id="worldmap" style="width: 100%; height: 400px; "></div>
        <br/><br/>
        <div align="center" class="medium">
            <label for="search">搜索框：</label>
            <input type="text" id="search" placeholder="请输入具体国家或地区" v-model="keyword"/>
            <button type="button" @click="searchCountry">查找</button>
        </div>
        <br/><br/>
        <!-- 表格 -->
        <div>
            <div class="row">
                <div class="column">国家/地区</div>
                <div class="pink column">确诊</div>
                <div class="gray column">死亡</div>
                <div class="green column">治愈</div>
            </div>

            <div v-for="item in showlist">
                <!-- 省市必须是兄弟节点，方便控制展开与收缩 -->
                <div class="row bggray" @click="togglecity(item)">
                    <div class="column">{{item.country}}</div>
                    <div class="gray column">{{item.confirmed}}</div>
                    <div class="gray column">{{item.deaths}}</div>
                    <div class="gray column">{{item.recovered}}
                        <font-awesome-icon :icon="['fas', 'caret-down']" v-if="!item.expanded"/>
                        <font-awesome-icon :icon="['fas', 'caret-up']" v-if="item.expanded"/>
                    </div>
                </div>
                <div v-if="item.expanded">
                    <div class="row" v-for="itemProvince in item.provinceList">
                        <div class="column">{{itemProvince.province}}</div>
                        <div class="gray column">{{itemProvince.confirmed}}</div>
                        <div class="gray column">{{itemProvince.deaths}}</div>
                        <div class="gray column">{{itemProvince.recovered}}</div>
                    </div>
                </div>
            </div>
            <div id="msg" @click="toggledata">
                {{msg}}
            </div>
        </div>
    </div>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- import JavaScript -->
<!-- V-charts -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="../js/china.js"></script>
<script src="../js/world.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                msg: "查看更多地区",
                flag: true,   //  控制全球是否展示数据
                flag1: true,  //  控制中国是否展示更多数据
                newslist: [], //  从网上爬下来的地区疫情数据
                showlist: [], //  用于控制展示6个省份或更多
                totalConfirmed: 0,
                totalRecovered: 0,
                totalDeaths: 0,
                totalCountryConfirmed: 0,
                totalCountryRecovered: 0,
                totalCountryDeaths: 0,
                chinalist: [],
                provincelist: [],
                keyword: ""
            }
        },
        // 生命周期方法：created（先）/mounted（后）
        // 自动执行
        // created：整个页面的组件都创建好了，数据未绑定
        created() {

            // 发送ajax请求
            // this.$axios.get("http://api.tianapi.com/txapi/ncovcity/index?key=61dc4aa584319fd07a9ff7248e22c456")
            axios.get("/test")
                // 获得请求
                // 无出错时
                .then(res => {
                    console.log(res);
                    // 从网上爬下来的地区疫情数据

                    this.newslist = res.data;
                    // 控制展示6个省份或更多
                    this.showlist = this.newslist.slice(0, 10);
                    var maplist = []; //  用于组装世界地图与爬下来的疫情数据（只放国家或地区即可）
                    var maplist1 = []; //  用于组装中国地图与爬下来的疫情数据（只放省份即可）
                    // var xAxis = []; //  x轴
                    // var series1 = []; //  确诊
                    // var series2 = []; //  死亡
                    // var series3 = []; //  治愈
                    // 开始组装
                    for (var i = 0; i < this.newslist.length; i++) {
                        this.totalConfirmed += this.newslist[i].confirmed;
                        this.totalRecovered += this.newslist[i].recovered;
                        this.totalDeaths += this.newslist[i].deaths;
                        var obj = {};

                        if (this.newslist[i].country == "US") {
                            obj.name = 'United States';
                        } else if (this.newslist[i].country == "中国") {
                            obj.name = 'China';
                            for (var j = 0; j < this.newslist[i].provinceList.length; j++) {
                                //  这个china必须定义在for循环里，否则会出错（未解）
                                var china = {};
                                china.name = this.newslist[i].provinceList[j].province;
                                china.value = this.newslist[i].provinceList[j].confirmed;
                                maplist1.push(china);
                            }
                        } else {
                            obj.name = this.newslist[i].country;
                        }

                        obj.value = this.newslist[i].confirmed;

                        maplist.push(obj);
                        // if (i < 6) {
                        //     console.log(this.newslist[i].confirmed);
                        //     xAxis.push(this.newslist[i].country);
                        //     series1.push(this.newslist[i].confirmed);
                        //     series2.push(this.newslist[i].deaths);
                        //     series3.push(this.newslist[i].recovered);
                        // }
                    }


                    var myChartWorld = echarts.init(document.getElementById("worldmap"));

                    var optionWorld = {
                        // 标题

                        title: {
                            sublink: 'http://esa.un.org/wpp/Excel-Data/population.htm',
                            top: 'top',
                            text: '世界疫情地图',
                            subtext: '',
                            x: 'center'
                        },
                        // 鼠标移动到地图上显示疫情数据
                        tooltip: {
                            trigger: 'item'
                        },
                        visualMap: {
                            min: 0,
                            max: 1000000,
                            text: ['High', 'Low'],
                            realtime: false,
                            calculable: true,
                            color: ['orangered', 'yellow', 'lightskyblue']
                        },

                        series: [{
                            name: '世界疫情地图',
                            type: 'map',
                            mapType: 'world',
                            label: {
                                normal: {
                                    show: true, //	显示国家名称
                                    fontSize: 5
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            //  控制地图缩放
                            roam: true,
                            itemStyle: {
                                emphasis: {
                                    label: {
                                        show: true
                                    }
                                }
                            },
                            data: maplist
                        }]

                    };

                    myChartWorld.setOption(optionWorld);

                    var myChart = echarts.init(document.getElementById("map"));

                    var option = {
                        // 背景
                        backgroundColor: '#FFFFFF',
                        // 标题
                        title: {
                            text: '中国疫情地图',
                            subtext: '',
                            x: 'center'
                        },
                        // 鼠标移动到地图上显示疫情数据
                        tooltip: {
                            trigger: 'item'
                        },

                        //左侧小导航图标
                        visualMap: {
                            show: true,
                            x: 'left',
                            y: 'bottom',
                            textStyle: {
                                fontSize: 10
                            },
                            splitList: [{
                                start: 1000
                            }, {
                                start: 500,
                                end: 999
                            }, {
                                start: 100,
                                end: 499
                            },
                                {
                                    start: 10,
                                    end: 99
                                }, {
                                    start: 1,
                                    end: 9
                                },
                            ],
                            color: ['#cc0000', '#ff4d4d', '#ff9999', '#ffe5e5']
                        },
                        //	控制图内数据
                        series: [{
                            name: '中国疫情地图',
                            type: 'map',
                            mapType: 'china',
                            label: {
                                normal: {
                                    show: true, //	显示省份名称
                                    fontSize: 8
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data: maplist1
                        }]
                    };

                    myChart.setOption(option);

                    // 基于准备好的dom，初始化echarts实例
                    // var myChartBar = echarts.init(document.getElementById("worldbar"));
                    //
                    // var posList = [
                    //     'left', 'right', 'top', 'bottom',
                    //     'inside',
                    //     'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                    //     'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
                    // ];
                    //
                    // var app = {};
                    //
                    // app.configParameters = {
                    //     rotate: {
                    //         min: -90,
                    //         max: 90
                    //     },
                    //     align: {
                    //         options: {
                    //             left: 'left',
                    //             center: 'center',
                    //             right: 'right'
                    //         }
                    //     },
                    //     verticalAlign: {
                    //         options: {
                    //             top: 'top',
                    //             middle: 'middle',
                    //             bottom: 'bottom'
                    //         }
                    //     },
                    //     position: {
                    //         options: echarts.util.reduce(posList, function (map, pos) {
                    //             map[pos] = pos;
                    //             return map;
                    //         }, {})
                    //     },
                    //     distance: {
                    //         min: 0,
                    //         max: 100
                    //     }
                    // };
                    //
                    // app.config = {
                    //     rotate: 90,
                    //     align: 'left',
                    //     verticalAlign: 'middle',
                    //     position: 'insideBottom',
                    //     distance: 15,
                    //     onChange: function () {
                    //         var labelOption = {
                    //             normal: {
                    //                 rotate: app.config.rotate,
                    //                 align: app.config.align,
                    //                 verticalAlign: app.config.verticalAlign,
                    //                 position: app.config.position,
                    //                 distance: app.config.distance
                    //             }
                    //         };
                    //         myChart.setOption({
                    //             series: [{
                    //                 label: labelOption
                    //             }, {
                    //                 label: labelOption
                    //             }, {
                    //                 label: labelOption
                    //             }, {
                    //                 label: labelOption
                    //             }]
                    //         });
                    //     }
                    // };
                    //
                    //
                    // var labelOption = {
                    //     show: true,
                    //     position: app.config.position,
                    //     distance: app.config.distance,
                    //     align: app.config.align,
                    //     verticalAlign: app.config.verticalAlign,
                    //     rotate: app.config.rotate,
                    //     formatter: '{c}  {name|{a}}',
                    //     fontSize: 16,
                    //     rich: {
                    //         name: {
                    //             textBorderColor: '#fff'
                    //         }
                    //     }
                    // };
                    //
                    // // 柱状图
                    // var optionBar = {
                    //     color: ['#003366', '#006699', '#4cabce', '#e5323e'],
                    //     tooltip: {
                    //         trigger: 'axis',
                    //         axisPointer: {
                    //             type: 'shadow'
                    //         }
                    //     },
                    //     legend: {
                    //         // data: ['Forest', 'Steppe', 'Desert', 'Wetland']
                    //         // 这里可以根据下面的series自动生成，但不能省略legend
                    //     },
                    //     toolbox: {
                    //         show: true,
                    //         orient: 'vertical',
                    //         left: 'right',
                    //         top: 'center',
                    //         feature: {
                    //             mark: {
                    //                 show: true
                    //             },
                    //             dataView: {
                    //                 show: true,
                    //                 readOnly: false
                    //             },
                    //             magicType: {
                    //                 show: true,
                    //                 type: ['line', 'bar', 'stack', 'tiled']
                    //             },
                    //             restore: {
                    //                 show: true
                    //             },
                    //             saveAsImage: {
                    //                 show: true
                    //             }
                    //         }
                    //     },
                    //     xAxis: [{
                    //         type: 'category',
                    //         axisTick: {
                    //             show: false
                    //         },
                    //         data: xAxis
                    //     }],
                    //     yAxis: [{
                    //         type: 'value'
                    //     }],
                    //     series: [{
                    //         name: '确诊',
                    //         type: 'bar',
                    //         barGap: 0,
                    //         label: labelOption,
                    //         data: series1
                    //     },
                    //         {
                    //             name: '死亡',
                    //             type: 'bar',
                    //             label: labelOption,
                    //             data: series2
                    //         },
                    //         {
                    //             name: '治愈',
                    //             type: 'bar',
                    //             label: labelOption,
                    //             data: series3
                    //         }
                    //     ]
                    // };
                    // // 使用刚指定的配置项和数据显示图表。
                    // myChartBar.setOption(optionBar);
                })
                // 出错时：
                .catch(res => {
                })
        },
        // mounted：组件创建好，同时数据也绑定到页面了
        mounted() {
        },
        methods: {
            togglecity(item) {
                this.$set(item, "expanded", !item.expanded);
            },
            toggledata() {
                if (this.flag) {
                    this.msg = "收起更多地区";
                    this.showlist = this.newslist;
                } else {
                    this.msg = "查看更多地区";
                    this.showlist = this.newslist.slice(0, 10);
                }
                this.flag = !this.flag;
            },
            searchCountry() {
                axios.get("find/countryName?countryName=" + this.keyword)
                    .then(res => {
                        this.newlist = res.data;
                    })
            }
        }
    })
</script>
</html>